import React, { Component } from 'react';
import { StyleSheet, Text, View, TextInput, FlatList, Image, Animated, TouchableOpacity, ScrollView, Modal, Alert, Dimensions } from "react-native";
import { GLOBAL } from '../../../config/global';
import { Common } from '../../../component/common/Common';
import { style } from '../../../theme/style';
import { API, API_GENERATE } from '../../../config/api';
import HTTP from '../../../utils/http';
import navigationSeevice from '../../../components/navigation/navigationSeevice';
import ModalPicsComponent from '../enterprise/details/_components/ModalPicsComponent';

const scale = GLOBAL.SCALE;
const correct = require('../../../imgs/global/correct.png');
const modalPicDelCfg = {
  visible: false,
  urls: [],
  picPress: () => { },
}
export class recordDetail extends Component {
  static navigationOptions = ({ navigation, navigationOptions }) => {
    return {
      headerTitle: '用户认证信息',
      headerTintColor: style.color.white,
      headerLeft: <Common type="headLeft" onPress={() => { navigation.goBack() }} color='#fff' />,
      headerRight: (<Image style={style.head.headRightEmpty} source={require('../../../imgs/goBackEmpty.png')} />),
      headerStyle: {  // 头部整体样式 
        elevation: 0,
        borderBottomWidth: 0,
        backgroundColor: style.color.themeColor
      },
      headerTitleStyle: {
        flex: 1,
        textAlign: 'center'
      }
    }
  };

  constructor(props) {
    super(props);
    let applyId = props.navigation.state.params;
    this.state = {
      authorization: 'Y',
      attachmentId: [],
      isLock: 'N',
      isFundsLock: 'N',
      companyVisible: false,
      companyName: '',
      detailInfo: { applyRecordLogVTOList: [] },
      searchList: [],
      fileId: '',
      imgUrlList: [],
      amplificationImage: false
    };
    this.searchKey = '';
    this.params = {
      globalId: '',
      applyId: applyId
    };
    this.imgUrl = []
  }

  async componentWillMount () {
    this._initPage();

  }

  async getImgView () {
    const qualificationArr = this.state.fileId.split(',');
    qualificationArr.map(async (fileId, index) => {
      await this.loadedImgs(fileId, qualificationArr.length, index);
    })
  }

  async	loadedImgs (fileId, length, index) {
    const response = await HTTP.GET(API_GENERATE(API.GET_IMG_VIEW), { fileId });
    if (response && response.image && response.image.length) {
      this.imgUrl.push(response.image);
    }
    if (length - 1 == index) {
      this.setState({ imgUrlList: this.imgUrl })
    }
  }
  _amplification (index) {
    modalPicDelCfg.visible = true;
    modalPicDelCfg.urls.push({
      url: this.state.imgUrlList[index],
      width: Dimensions.get('window').width
    });
    modalPicDelCfg.picPress = () => {
      modalPicDelCfg.visible = false;
      modalPicDelCfg.urls = [];
      this.setState({
        amplificationImage: false
      })
    }
    this.setState({
      amplificationImage: true
    })
  }
  _initPage = async () => {
    let res = await HTTP.POST(API_GENERATE(API.DETAIL_INFO + '?applyId=' + this.params.applyId));
    this.setState({
      detailInfo: res,
      authorization: res.isAuth,
      isLock: res.isAuthFileMatch,
      isFundsLock:res.isAuthAccount,
      companyName: res.globalId ? res.companyName : '',
      fileId: res.authorizationFile
    })
    this.params.applyName = res.applyName
    if (this.state.authorization === 'Y' && this.state.fileId) {
      this.getImgView()
    }

  }
  _authorization = (type) => {
    this.setState({ authorization: type })
  }
  //步骤栏
  _stepWrap () {
    const { applyRecordLogVTOList } = this.state.detailInfo;
    return (
      <View style={styles.stepWrap}>
        {applyRecordLogVTOList.map((item, index) => {
          return (
            <View style={{ flexDirection: 'row' }} key={index}>
              <Text style={[styles.recordText, { width: 40 * scale }]}>{item.operateTypeName}</Text>
              <View style={styles.recordType}>
                <View style={styles.recordCircle}>
                </View>
                {index === applyRecordLogVTOList.length - 1 ? null : <View style={styles.recordLine}></View>}
              </View>
              <View>
                <Text style={styles.recordText}>{item.createTime || '-'}</Text>
                <Text style={[styles.recordText, { width: 200 * scale }]}>{item.bizTeamName}{item.bizTeamName ? '：' : ''}{item.createByName}</Text>
                <Text style={[styles.recordText, { width: 200 * scale }]}>备注：{item.dealComments || '-'}</Text>
              </View>
            </View>
          )
        })}
      </View>
    )
  }
  async _openPress () {
    let { detailInfo } = this.state;
    this.searchKey = detailInfo.companyName
    this.reSearch(this.searchKey)
  }
  async reSearch (txt) {
    this.setState({
      status: 'loading'
    })
    let res = await HTTP.POST(API_GENERATE(API.ENTERPRISE_CHOOSE + '?companyName=' + txt));
    if (res) {
      this.setState({ searchList: res.slice(0, 10), companyVisible: true, status: res.length > 0 ? 'data' : 'empty' })
    }
    else {
      this.setState({
        status: 'error'
      })
    }
  }
  _selectEnterprise (data) {
    this.params.globalId = data.globalId
    this.params.companyName = data.companyName
    this.setState({
      companyVisible: false,
      companyName: data.companyName
    })
  }
  render () {
    let { authorization, isLock, detailInfo, imgUrlList, amplificationImage,isFundsLock } = this.state;
    return (
      <View style={styles.container}>
        <ScrollView style={styles.bodyBox}>
          <View style={styles.createBox}>
            <View style={[styles.flexRow, styles.selectBox]}>
              <View style={styles.ItemHeadNewBox}></View>
              <View style={[styles.flexRow, styles.select]}>
                <View style={styles.flexRow}>
                  <Text style={styles.selectTitle}>企业名称</Text>
                  {detailInfo.globalId ?
                    <Text style={styles.companyContent}>{detailInfo.companyName}</Text>
                    : <Text style={styles.selectContent}>{detailInfo.companyName}</Text>
                  }
                </View>
              </View>
              <View style={styles.topBtnIconBox}>
              </View>
            </View>
            <View style={[styles.flexRow, styles.selectBox]}>
              <View style={styles.ItemHeadNewBox}>
              </View>
              <View style={[styles.flexRow, styles.select]}>
                <View style={styles.flexRow}>
                  <Text style={styles.selectTitle}>用户姓名</Text>
                  <Text style={styles.mobileContent}>{detailInfo.applyName}</Text>
                </View>
              </View>
              <View style={styles.topBtnIconBox}>
              </View>
            </View>
            <View style={[styles.flexRow, styles.selectBox]}>
              <View style={styles.ItemHeadNewBox}>
                {detailInfo.isNew === 'Y' ?
                  <View style={styles.ItemHeadNew}>
                    <Text style={styles.ItemHeadNewText}>新</Text>
                  </View> : null
                }
              </View>
              <View
                style={[styles.flexRow, styles.select]}
              >
                <View style={styles.flexRow}>
                  <Text style={styles.selectTitle}>用户手机</Text>
                  <Text style={styles.mobileContent}>{detailInfo.applyMobile}</Text>
                </View>
              </View>
              <View style={styles.topBtnIconBox}>
              </View>
            </View>
            <View style={[styles.flexRow, styles.selectBox]}>
              <View style={styles.ItemHeadNewBox}>
              </View>
              <View
                style={[styles.flexRow]}
              >
                <View style={{ flexDirection: 'row' }}>
                  <Text style={styles.selectTitle}>授权委托</Text>
                  <View>
                    <View style={styles.flexRow}>
                      <View style={[styles.flexRow, { marginRight: 44 * scale }]}>
                        <View style={styles.selectCircle}>
                          {authorization === 'Y' ? <View style={styles.selectedCircle}></View> : null}
                        </View>
                        <Text style={styles.selectText}>有授权</Text>
                      </View>
                      <View style={styles.flexRow}>
                        <View style={styles.selectCircle}>
                          {authorization === 'N' ? <View style={styles.selectedCircle}></View> : null}
                        </View>
                        <Text style={styles.selectText}>无授权</Text>
                      </View>
                    </View>
                    {authorization === 'Y' ?
                      <View>
                        {imgUrlList ? <View style={[styles.flexRow, { marginTop: 20 * scale }]}>
                          {
                            imgUrlList.map((item, index) => {
                              return (
                                <TouchableOpacity key={index} onPress={() => { this._amplification(index) }}>
                                  <Image style={{ marginRight: 5, width: 30, height: 30 }}
                                    source={{ uri: item }}
                                  />
                                </TouchableOpacity>
                              )
                            })
                          }
                        </View> : null}
                        <View style={[styles.flexRow, { marginTop: 15 * scale }]}>
                          <View style={styles.lockView}>
                            {isLock === 'Y' ? <Image style={styles.lockImage} source={correct} /> : null}
                          </View>
                          <Text style={{ color: '#000', fontSize: 12 }}>委托书与壹化网一致</Text>
                        </View>
                        <View style={[styles.flexRow, { marginTop: 15 * scale }]}>
                          <View style={styles.lockView}>
                            {isFundsLock === 'Y' ? <Image style={styles.lockImage} source={correct} /> : null}
                          </View>
                          <Text style={{ color: '#000', fontSize: 12 }}>是否可查资金账户</Text>
                        </View>
                      </View>
                      : null}
                  </View>
                </View>
              </View>
              <View style={styles.topBtnIconBox}>
              </View>
            </View>
            <View style={styles.bodyTextBox}>
              <Text style={styles.bodyTitle}>申请时间</Text>
              <Text style={styles.bodyText}>{detailInfo.createTime}</Text>
            </View>
            <View style={styles.bodyTextBox}>
              <Text style={styles.bodyTitle}>申请备注</Text>
              <Text style={[styles.bodyText, { width: 210 * scale }]}>{detailInfo.comments || '-'}</Text>
            </View>
            <View style={styles.bodyTextBox}>
              <Text style={styles.bodyTitle}>业务员</Text>
              <Text style={[styles.bodyText, { width: 210 * scale }]}>{detailInfo.bizStaffName || '-'}{detailInfo.bizStaffName && detailInfo.bizTeamName ? <Text style={styles.bodyText}>({detailInfo.bizTeamName})</Text> : null}</Text>
            </View>
            <View style={styles.bodyTextBox}>
              <Text style={styles.bodyTitle}>业务组织</Text>
              <Text style={[styles.bodyText, { width: 210 * scale }]}>{detailInfo.corpName || '-'}</Text>
            </View>
            {
              detailInfo.applyRecordLogVTOList.length > 0 ? this._stepWrap() : null
            }
          </View>
        </ScrollView>
        {amplificationImage ?
          <ModalPicsComponent {...modalPicDelCfg} /> : null
        }
      </View >
    )
  }
}


const styles = StyleSheet.create({
  container: {
    flex: 1,
    position: 'relative',
    backgroundColor: style.color.themeColor
  },
  topBox: {
    flexDirection: 'row',
    alignItems: 'center',
    justifyContent: 'space-between'
  },
  headBox: {
    paddingTop: 30 * scale,
    paddingBottom: 26 * scale,
    backgroundColor: style.color.themeColor
  },
  topTitle: {
    fontSize: 18 * scale,
    color: '#fff'
  },
  bodyBox: {
    marginTop: 13 * scale,
    flex: 1,
    backgroundColor: '#fff',
    borderTopLeftRadius: 18 * scale,
    borderTopRightRadius: 18 * scale
  },
  flexRow: {
    flexDirection: 'row',
    alignItems: 'center',
  },
  createBox: {
    paddingTop: 40 * scale,
    marginLeft: 30 * scale,
    marginRight: 30 * scale,
    marginBottom: 75 * scale
  },
  needed: {
    fontSize: 12 * scale,
    color: '#F80A0A',
    marginRight: 5 * scale,
  },
  selectBox: {
    marginBottom: 26 * scale,
    alignItems: 'stretch',
  },
  select: {
    flex: 1,
    justifyContent: 'space-between',
    // borderBottomWidth: 1,
    // borderBottomColor: '#000',
    paddingBottom: 5 * scale,
  },
  selectTitle: {
    fontSize: 12 * scale,
    color: '#000000',
    marginRight: 30 * scale,
  },
  selectContent: {
    fontSize: 12 * scale,
    color: '#AAB1BF'
  },
  selectedContent: {
    fontSize: 12 * scale,
    color: '#000'
  },
  mobileContent: {
    fontSize: 12 * scale,
    color: '#000000',
    fontFamily: 'PingFangSC-Semibold',
    // opacity: 0.5
  },
  companyContent: {
    fontSize: 12 * scale,
    color: '#0091FF',
    fontFamily: 'PingFangSC-Semibold',
  },
  topBtnIconBox: {
    marginLeft: 10 * scale,
    width: 12 * scale,
  },
  topBtnIcon: {
    width: 12 * scale,
    height: 12 * scale,
  },
  ItemHeadNewBox: {
    width: 15,
    height: 15,
    marginRight: 10 * scale
  },
  ItemHeadNew: {
    width: 15,
    height: 15,
    backgroundColor: '#E02020',
    justifyContent: 'center',
    alignItems: 'center',
  },
  ItemHeadNewText: {
    color: '#fff',
    fontSize: 10 * scale,
    fontFamily: 'PingFangSC-Semibold'
  },
  selectCircle: {
    borderColor: '#0E5BC6',
    borderWidth: 1,
    borderRadius: 50,
    width: 12 * scale,
    height: 12 * scale,
    alignItems: 'center',
    justifyContent: 'center'
  },
  selectedCircle: {
    backgroundColor: '#98C1EB',
    width: 6 * scale,
    height: 6 * scale,
    borderRadius: 6 * scale
  },
  selectText: {
    marginLeft: 5 * scale,
    fontSize: 12 * scale
  },
  lockView: {
    flexDirection: 'row',
    justifyContent: 'center',
    alignItems: 'center',
    height: 13 * scale,
    width: 13 * scale,
    borderWidth: 1 * scale,
    borderColor: '#98C1EB',
    marginLeft: 5 * scale,
    marginRight: 10 * scale,
  },
  lockImage: {
    width: 8 * scale,
    height: 6 * scale
  },
  bodyTextBox: {
    marginLeft: 25,
    marginBottom: 25,
    flexDirection: 'row',
    // alignItems: 'center'
  },
  bodyTitle: {
    marginRight: 32,
    fontSize: 12,
    width: 50
  },
  bodyText: {
    fontSize: 12
  },
  bottomBox: {
    height: 100,
    backgroundColor: '#DFE3F0',
    zIndex: 100,
    flexDirection: 'row',
    alignItems: 'center',
    justifyContent: 'center'
  },
  button: {
    borderRadius: 20,
    height: 38,
    alignItems: 'center',
    justifyContent: 'center',
    paddingLeft: 20,
    paddingRight: 20,
    borderWidth: 1,
    borderColor: '#0E5BC6'
  },
  stepWrap: {
    backgroundColor: '#F4F7FE',
    paddingTop: 20,
    // paddingBottom: 20,
    paddingLeft: 20,
  },
  textRowText: {
    fontSize: 11 * scale,
    lineHeight: 16 * scale,
    marginBottom: 10 * scale
  },
  textRow: {
    paddingLeft: 10 * scale,
    paddingRight: 10 * scale
  },
  recordType: {
    position: 'relative',
    height: 64,
    marginLeft: 13,
    marginTop: 4,
    marginRight: 15
  },
  recordCircle: {
    width: 6,
    height: 6,
    backgroundColor: '#959BA8',
    borderRadius: 6
  },
  recordLine: {
    height: 62,
    width: 0.5,
    backgroundColor: '#959BA8',
    position: 'absolute',
    top: 6,
    left: 2.5
  },
  recordText: {
    fontFamily: 'PingFangSC-Regular',
    fontSize: 10,
    color: '#959BA8',
    marginBottom: 2
  },
  containerModal: {
    width: 375 * scale,
    height: GLOBAL.SCREEN_HEIGHT,
    justifyContent: 'flex-end',
  },
  bg: {
    width: 375 * scale,
    height: GLOBAL.SCREEN_HEIGHT,
    backgroundColor: 'rgba(0, 0, 0, .3)',
  },
  companyBox: {
    height: '70%',
    backgroundColor: 'rgba(0, 0, 0, .3)',
  },
  back: {
    backgroundColor: '#fff',
    height: '100%',
    borderTopLeftRadius: 15,
    borderTopRightRadius: 15
  },
  searchBox: {
    flexDirection: 'row',
    justifyContent: 'center',
    alignItems: 'center',
    marginTop: 15 * scale,
    marginBottom: 20 * scale
  },
  search: {
    flexDirection: 'row',
  },
  searchInput: {
    height: 37 * scale,
    width: 300 * scale,
    paddingLeft: 70 * scale,
    paddingRight: 12 * scale,
    backgroundColor: '#F4F7FE',
    flexDirection: 'row',
    justifyContent: 'center',
    alignItems: 'center',
    paddingVertical: 0,
    position: 'relative',
    borderRadius: 8 * scale,
    color: '#999898',
    fontSize: 12
  },
  searchIcon: {
    width: 18 * scale,
    height: 18 * scale,
    position: 'absolute',
    left: 24 * scale,
    top: 10 * scale,
    zIndex: 9,
    opacity: 0.8,
    tintColor: '#999898'
  },
  searchFilter: {
    fontSize: 25 * scale,
    color: '#fff',
    marginLeft: 17 * scale,
  },
  searchList: {
    height: 50,
    flexDirection: 'row',
    alignItems: 'center',
    paddingLeft: 38,
    paddingRight: 26,
    borderBottomWidth: 1,
    borderColor: '#E3E7F0',
    justifyContent: 'space-between'
  },
  enterpriseCircle: {
    width: 12,
    height: 12,
    borderRadius: 12,
    borderWidth: 1,
    borderColor: '#7D7E7F',
    opacity: 0.38
  },
  enterpriseImage: {
    width: 13,
    height: 13,
    marginLeft: 16
  },
  textInput: {
    borderWidth: 1 * scale,
    borderColor: '#000',
    borderRadius: 4 * scale,
    padding: 10 * scale,
    height: 122 * scale,
    fontSize: 12 * scale,
    marginTop: 10 * scale,
  },
  submitButton: {
    marginTop: 30 * scale,
    height: 35 * scale,
    width: 100 * scale,
    backgroundColor: '#0E7FFD',
    borderRadius: 15 * scale,
    alignSelf: 'center',
    justifyContent: 'center',
    alignItems: 'center',
  },
  modalPage: {
    width: GLOBAL.SCREEN_WIDTH,
    height: GLOBAL.SCREEN_HEIGHT,
    backgroundColor: 'rgba(0, 0, 0, .6)',
    justifyContent: 'center',
    alignItems: 'center',
  },
  modalWrap: {
    width: 302 * scale,
    backgroundColor: '#fff',
    borderRadius: 4 * scale,
    overflow: 'hidden',
    padding: 20 * scale,
    paddingTop: 10 * scale,
  },
  closeRemark: {
    width: 30 * scale,
    height: 30 * scale,
    flexDirection: 'row',
    justifyContent: 'flex-end',
    alignItems: 'center'
  }
})